{% stylesheet %}
    .block_image2_razzi .block_image2_razzi_list .default_image_number {
        font-size: 18px;
        color: #999;
        position: absolute;
        right: 20px;
        bottom: 14px;
    }
    .block_image2_razzi .block_image2_razzi_list{
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .block_image2_razzi .block_image2_razzi_list .image-item{
        width: calc(50% - 15px);
        position: relative;
        overflow: hidden;
    }
    .block_image2_razzi .block_image2_razzi_list .image-item img{
        width: 100%;
        object-fit: cover;
        transition: all 0.3s;
    }
    .block_image2_razzi .block_image2_razzi_list .image-item:hover img{
        transform: scale(1.1);
    }
    .block_image2_razzi .block_image2_razzi_list .image-item .block_image2_razzi_content{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        padding: 40px;
        box-sizing: border-box;        
        line-height: 1.5;
    }
    .block_image2_razzi .block_image2_razzi_list .image-item .block_image2_razzi_content_title{
        font-size: 28px;
        margin-bottom: 20px;
        font-weight:500;
    }
    .block_image2_razzi .block_image2_razzi_list .image-item .block_image2_razzi_content_detail{
        margin-bottom: 30px;
    }
    .block_image2_razzi .block_image2_razzi_list .image-item .block_image2_razzi_content_link{
        font-weight:500;
    }

    .block_image2_razzi .block_image2_razzi_list .image-item .block_image2_razzi_content_left{
        text-align: left;
    }
    .block_image2_razzi .block_image2_razzi_list .image-item .block_image2_razzi_content_center{
        text-align: center;
    }
    .block_image2_razzi .block_image2_razzi_list .image-item .block_image2_razzi_content_right{
        text-align: right;
    }
    @media (max-width: 1000px) {
        .block_image2_razzi .block_image2_razzi_list .image-item .block_image2_razzi_content{
            padding: 20px;
        }
        .block_image2_razzi .block_image2_razzi_list .image-item .block_image2_razzi_content_title{
            font-size: 20px;
        }
    }
    @media (max-width: 767px) {
        .block_image2_razzi .block_image2_razzi_list{
            flex-wrap: wrap;
        }
        .block_image2_razzi .block_image2_razzi_list .image-item{
            width: 100%;
            margin-bottom: 15px;
        }
    }

{% endstylesheet %}
<div class="block_image2_razzi">
    <div class="{% if section.settings.is_width_fill %}full_container_wrapper{% else %}container_wrapper{% endif %}">
        {% if section.settings.title != '' or section.settings.detail != '' %}
        <div class="block_title">
            {% if section.settings.title != '' %}<h2>{{ section.settings.title }}</h2>{% endif %}
            {% if section.settings.detail != '' %}<div class="block_detail">{{ section.settings.detail }}</div>{% endif %}
        </div>
        {% endif %}
        <div class="block_image2_razzi_list">

            <a class="image-item" href="{{section.settings.image_one_link | setUrlDataFrom:data_from}}"  data-tips="Please select the image link">
                {% if section.settings.image_one.src %}
                {% include 'lazy_img',  src:section.settings.image_one.src,  alt:section.settings.image_one.alt %}
                <div class="block_image2_razzi_content block_image2_razzi_content_{{ section.settings.image_one_position }}" style="color: {{ section.settings.image_one_content_color }}">
                    {% if section.settings.image_one_title != "" %}
                    <div class="block_image2_razzi_content_title">{{ section.settings.image_one_title }}</div>
                    {% endif %}
                    {% if section.settings.image_one_content != "" %}
                    <div class="block_image2_razzi_content_detail">{{ section.settings.image_one_content }}</div>
                    {% endif %}
                    {% if section.settings.image_one_link_content != "" %}
                    <div class="block_image2_razzi_content_link">{{ section.settings.image_one_link_content }}</div>
                    {% endif %}
                </div>
                {% else %}
                {% include default_block , {width:'100%',height : "300px" } %}
                <span class="default_image_number">Image-1</span>
                {% endif %}
            </a>
            <a class="image-item" href="{{section.settings.image_two_link | setUrlDataFrom:data_from}}"  data-tips="Please select the image link">
                {% if section.settings.image_two.src %}
                {% include 'lazy_img',  src:section.settings.image_two.src,  alt:section.settings.image_two.alt %}

                <div class="block_image2_razzi_content block_image2_razzi_content_{{ section.settings.image_two_position }}" style="color: {{ section.settings.image_two_content_color }}">
                    {% if section.settings.image_two_title != "" %}
                    <div class="block_image2_razzi_content_title">{{ section.settings.image_two_title }}</div>
                    {% endif %}
                    {% if section.settings.image_two_content != "" %}
                    <div class="block_image2_razzi_content_detail">{{ section.settings.image_two_content }}</div>
                    {% endif %}
                    {% if section.settings.image_two_link_content != "" %}
                    <div class="block_image2_razzi_content_link">{{ section.settings.image_two_link_content }}</div>
                    {% endif %}
                </div>  

                {% else %}
                {% include default_block , {width:'100%',height:"300px"} %}
                <span class="default_image_number">Image-2</span>
                {% endif %}
            </a>
        </div>
    </div>
</div>
 
{% schema %}
{
	"tag": "",
	"class": "block_image2_razzi",
	"is_global": false,
	"name": {
		"zh_CN": "多图2",
		"en_US": "Images 2"
	},
	"max_blocks": "0",
	"icon": "icon-duotu2",
	"settings": [
		{
			"type": "card_header",
			"label": {
				"zh_CN": "设置",
				"en_US": "Settings"
			}
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "标题",
				"en_US": "Title"
			},
			"id": "title"
		},
		{
			"type": "card_text_editor",
			"label": {
				"zh_CN": "简短描述",
				"en_US": "Short description"
			},
			"id": "detail"
		},
		{
			"type": "card_header",
			"label": {
				"zh_CN": "图片1",
				"en_US": "Image 1"
			}
		},
		{
			"type": "card_image",
			"label": {
				"zh_CN": "图片",
				"en_US": "Image"
			},
			"info": {
				"zh_CN": "建议宽高比例为2:1，宽度800px以上",
				"en_US": "Recommended width/height ratio: 2:1, width over 800px"
			},
			"id": "image_one"
		},
		{
			"type": "card_select",
			"label": {
				"zh_CN": "图1内容位置",
				"en_US": "Figure 1 Content location"
			},
			"id": "image_one_position",
			"option": [
				{
					"label": {
						"zh_CN": "居左",
						"en_US": "To the left"
					},
					"value": "left"
				},
				{
					"label": {
						"zh_CN": "居中",
						"en_US": "In the center"
					},
					"value": "center"
				},
				{
					"label": {
						"zh_CN": "居右",
						"en_US": "To the right"
					},
					"value": "right"
				}
			]
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "图1标题编辑",
				"en_US": "Figure 1 Title editing"
			},
			"id": "image_one_title"
		},
		{
			"type": "card_text_editor",
			"label": {
				"zh_CN": "图1内容编辑",
				"en_US": "Figure 1 Content editing"
			},
			"id": "image_one_content"
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "图1按钮编辑",
				"en_US": "Figure 1 Button editing"
			},
			"id": "image_one_link_content"
		},
		{
			"type": "card_color",
			"label": {
				"zh_CN": "图1内容颜色",
				"en_US": "Figure 1 Content color"
			},
			"id": "image_one_content_color"
		},
		{
			"type": "card_page_link",
			"label": {
				"zh_CN": "链接",
				"en_US": "Link"
			},
			"id": "image_one_link"
		},
		{
			"type": "card_header",
			"label": {
				"zh_CN": "图片2",
				"en_US": "Image 2"
			}
		},
		{
			"type": "card_image",
			"label": {
				"zh_CN": "图片",
				"en_US": "Image"
			},
			"info": {
				"zh_CN": "建议宽高比例为2:1，宽度800px以上",
				"en_US": "Recommended width/height ratio: 2:1, width over 800px"
			},
			"id": "image_two"
		},
		{
			"type": "card_select",
			"label": {
				"zh_CN": "图2内容位置",
				"en_US": "Figure 2 Content location"
			},
			"id": "image_two_position",
			"option": [
				{
					"label": {
						"zh_CN": "居左",
						"en_US": "To the left"
					},
					"value": "left"
				},
				{
					"label": {
						"zh_CN": "居中",
						"en_US": "In the center"
					},
					"value": "center"
				},
				{
					"label": {
						"zh_CN": "居右",
						"en_US": "To the right"
					},
					"value": "right"
				}
			]
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "图2标题编辑",
				"en_US": "Figure 2 Title editing"
			},
			"id": "image_two_title"
		},
		{
			"type": "card_text_editor",
			"label": {
				"zh_CN": "图2内容编辑",
				"en_US": "Figure 2 Content editing"
			},
			"id": "image_two_content"
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "图2按钮编辑",
				"en_US": "Figure 2 Button editing"
			},
			"id": "image_two_link_content"
		},
		{
			"type": "card_color",
			"label": {
				"zh_CN": "图2内容颜色",
				"en_US": "Figure 2 Content color"
			},
			"id": "image_two_content_color"
		},
		{
			"type": "card_page_link",
			"label": {
				"zh_CN": "链接",
				"en_US": "Link"
			},
			"default": {
				"type": "",
				"title": "",
				"url": ""
			},
			"id": "image_two_link"
		}
	],
	"blocks": [],
	"default": {
		"settings": {
			"title": "",
			"image_one": {
				"src": "",
				"alt": ""
			},
			"image_one_position": "left",
			"image_one_title": "Small Space Dining <br>Room Furniture",
			"image_one_content": "",
			"image_one_link_content": "",
			"image_one_content_color": "#000000",
			"image_one_link": {
				"type": "",
				"title": "",
				"url": ""
			},
			"image_two": {
				"src": "",
				"alt": ""
			},
			"image_two_position": "left",
			"image_two_title": "Living Room Sets <br>And Collections",
			"image_two_content": "",
			"image_two_content_color": "#000000",
			"image_two_link": {
				"type": "",
				"title": "",
				"url": ""
			}
		},
		"blocks": []
	}
}
{% endschema %}